<div class="relative">
  <div class="tab" [ngClass]="{'active': !isSupport}" (click)="isSupport = false">Setup Instructions</div>
  <div class="tab" [ngClass]="{'active': isSupport}" (click)="isSupport = true">Support Options</div>
  <!--  <div class="tab-underline"></div>-->
</div>

<div class="inner-app-container text-dark-theme relative margin-top" *ngIf="isSupport">
  <app-connection-status #connectionStatus></app-connection-status>
  <div class="setup-container">
        <div class="screen-description">Get help and support from SideQuest.</div>
        <div class="divider divider-margin-top margin-bottom"></div>
    <div class="hint-text">
      <p>We have many solutions baked in to help you solve the most common problems. This is the best option becuase this info will always be the most up to date.</p>
      <div class="pure-material-button-contained extra-margin-bottom" (click)="connectionStatus.helpOpen = true">Fix It For Me</div>
      <br>
      <p>If you are still having trouble then please visit our support community on SideQuest.</p>
      <div class="pure-material-button-contained extra-margin-bottom" (click)="appService.opn('https://sdq.st/support')">Open Support Community</div>
      <br>
      <p *ngIf="adb.diagnostics.usb && adb.diagnostics.usb.log">If instructed to upload logs by a SideQuest support person, please click this button.</p>
      <div *ngIf="adb.diagnostics.usb && adb.diagnostics.usb.log" class="pure-material-button-contained extra-margin-bottom" (click)="uploadLogs();">{{'Upload Logs'}}</div>
      <div *ngIf="link">
        Copy and paste this link into your support request:
        <h3>{{link}}</h3>
        <div class="pure-material-button-contained button-margin-bottom" (click)="copyToClipboard()">Copy to Clipboard</div>
      </div>
      <div id="thankYou">
        <ng-container *ngIf="link">Thank you!</ng-container>
      </div>
    </div>
  </div>

</div>
<div class="inner-app-container text-dark-theme relative inner-app-container-margin-top" *ngIf="!isSupport">
  <div class="pure-material-button-contained flat" [ngClass]="{'active': page === 1}" (click)="page = 1">Step 1: Create Org</div> >
  <div class="pure-material-button-contained flat" [ngClass]="{'active': page === 2}" (click)="page = 2">Step 2: Dev Mode</div> >
  <div class="pure-material-button-contained flat clearfix" [ngClass]="{'active': page === 3}" (click)="page = 3">Step 3: Connect</div>
  <app-connection-status (backHome)="backHome.emit()"></app-connection-status>
  <div class="setup-container">
    <div class="pure-material-button-contained tiny slim left-arrow" *ngIf="page > 1" (click)="page < 2 ? page = 1 : page = page - 1;">
      <img src="assets/images/back_arrow.svg"/>
    </div>

    <div class="pure-material-button-contained tiny slim right-arrow" *ngIf="page < 3" (click)="page > 2 ? page = 3 : page = page + 1;">
      <img class="flip-horizontal" src="assets/images/back_arrow.svg"/>
    </div>
    <ng-container *ngIf="page === 1">
      <div class="setup-image-container">
        <video class="setup-image" #createOrganisation autoplay="true" loop="true" controls="false" src="https://sidequestvr.com/assets/videos/create_organisation.mp4" (error)="videoError(createOrganisation, $event, 'assets/setup/create_organisation.mp4')"></video>
      </div>
      <h3 i18n>
        Step 1: Meta Website - Create Organisation
      </h3>
      <div class="description-section">
        <ng-container i18n>
          To allow installing apps & games to your headset we need to enable developer mode. To do this,
          you have to be a registered "developer" on the Meta website, it's free, quick and easy. Open
        </ng-container>
        <a class="diagnosticator" (click)="open('https://developer.oculus.com/sign-up/ ')">developer.oculus.com/sign-up/</a>
        <ng-container i18n>
          and create an 'organization'.
          You'll need to accept the developer agreement and to verify your account using either a credit card
          or a phone number. Most accounts will already be verified. Next you'll need to create an organisation like above.
        </ng-container>
      </div>
    </ng-container>
    <ng-container *ngIf="page === 2">
      <div class="setup-image-container">
        <video class="setup-image tall" #enableDevMode autoplay="true" loop="true" controls="false" src="https://sidequestvr.com/assets/videos/enable_dev_mode.mp4" (error)="videoError(enableDevMode, $event, 'assets/setup/enable_dev_mode.mp4')" (click)="open('https://sidequestvr.com/assets/images/get-sidequest/verify.png')"></video>
      </div>
      <h3 i18n>
        Step 2: Enable Developer Mode and Reboot
      </h3>
      <div class="description-section" i18n>
        Now that you’re a "developer", open the Oculus app on your smartphone or tablet. In the
        Settings tab, tap on the headset and tap 'More settings'. In the list, you should now see
        Developer Mode. Once you have enabled developer mode it is a good idea to reboot your headset
        to be able to see it on the device.
      </div>
    </ng-container>
    <ng-container *ngIf="page === 3">
      <div class="setup-image-container">
        <video class="setup-image" #connectAccept autoplay="true" loop="true" controls="false"  src="https://sidequestvr.com/assets/videos/connect_accept.mp4" (error)="videoError(connectAccept, $event, 'assets/setup/connect_accept.mp4')"></video>
      </div>
      <h3 i18n>
        Step 3: Connect USB Cable and Allow USB Debugging
      </h3>
      <div class="description-section" i18n>
        Now its time to connect the USB cable. Once you are connected you will have to allow USB
        debugging access on your headset. If you put your headset on at this point you will see
        something like the below. You should also select 'Always allow from this computer' to prevent
        this message from coming up every time you connect.
      </div>
    </ng-container>
  </div>
</div>
